<template>
  <div class="background" :style="{backgroundImage:color}">
    <div class="content">
      <div class="img"><img src="~assets/img/profile/header.png" /></div>
        <div class="text">
          <div class="name">{{name}}</div>
          <div>{{tel}}</div>
        </div>
    </div>
  </div>
</template>

<script>
  export default{
    name:'',
    data(){
      return {

       }
    },
    props:{
      backgroundColor:{
        type:Array,
        default(){
          return ['red','orange']
        }
      },
      imgUrl:{
        type:String,
        default:""
      },
      name:{
        type:String,
        default:""
      },
      tel:{
        type:String,
        default:""
      }
    },
    computed:{
      color(){
        return "linear-gradient(to right, " + this.backgroundColor[0] + "," + this.backgroundColor[1]+")"
      }
    },
    methods:{

    },
    components:{

    }
  }
</script>

<style scoped>
  .background, .content{
    display: flex;
    align-items: center;
  }
  .img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #C0C0C0;
    margin-left: 15px;
    margin-right: 15px;
  }
  .name{
    font-size: 23px;
    margin-bottom: 5px;
  }
  img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
</style>
